ExtJS একটি শক্তিশালী ইউজার ইন্টারফেস ফ্রেমওয়ার্ক, যা ব্যবহারকারীদের ডেটা সম্পাদনা করার জন্য বিভিন্ন কাস্টমাইজেবল অপশন সরবরাহ করে। Inline Editing, Cell Editing, এবং Row Editing এর মাধ্যমে ডেটা সরাসরি গ্রিডে সম্পাদনা করা সম্ভব হয়, যা অ্যাপ্লিকেশনগুলিকে আরও ইন্টারেক্টিভ এবং ইউজার-ফ্রেন্ডলি করে তোলে। এই ফিচারগুলো ব্যবহারকারীকে সহজে ডেটা সম্পাদনা করার সুবিধা দেয়।
১. Inline Editing
Inline Editing হলো একটি সহজ পদ্ধতি যেখানে কম্পোনেন্টের ভিতরে থাকা ডেটা সরাসরি সম্পাদনা করা হয়। উদাহরণস্বরূপ, যদি আপনি একটি গ্রিডে কিছু ডেটা দেখতে পান, তবে আপনি সরাসরি ওই ডেটাতে ক্লিক করে পরিবর্তন করতে পারবেন। এখানে ব্যবহারকারী ডেটা পরিবর্তন করার জন্য নতুন উইন্ডো বা পপ-আপে যেতে হবে না।
Inline Editing কনফিগারেশন:
উদাহরণ:
Ext.create('Ext.grid.Panel', {
title: 'Inline Editing Example',
store: {
fields: ['name', 'email'],
data: [
{ name: 'John', email: 'john@example.com' },
{ name: 'Jane', email: 'jane@example.com' }
]
},
columns: [
{ text: 'Name', dataIndex: 'name', editor: 'textfield' },
{ text: 'Email', dataIndex: 'email', editor: 'textfield' }
],
plugins: [
Ext.create('Ext.grid.plugin.CellEditing', {
clicksToEdit: 1
})
],
renderTo: Ext.getBody()
});
editor: এটি যেকোনো ফর্ম ফিল্ডকে কল করতে ব্যবহার করা হয়, যেমনtextfield,numberfield, ইত্যাদি।plugins:CellEditingপ্লাগিন ব্যবহার করে গ্রিডের মধ্যে ইনলাইন এডিটিং সক্ষম করা হয়।clicksToEdit: এটি নির্ধারণ করে কত বার ক্লিক করলে ইনলাইন এডিটিং শুরু হবে।
২. Cell Editing
Cell Editing এ, নির্দিষ্ট একটি সেলের মধ্যে ডেটা সম্পাদনা করা হয়, তবে সম্পূর্ণ রো বা কলামের পরিবর্তে শুধুমাত্র ঐ সেলটি এডিট করা হয়। এটি সাধারণত একটি CellEditing Plugin ব্যবহার করে সম্পাদনা করা হয়, যা সেল এডিট করতে সহজ এবং দ্রুত পদ্ধতি সরবরাহ করে।
Cell Editing কনফিগারেশন:
উদাহরণ:
Ext.create('Ext.grid.Panel', {
title: 'Cell Editing Example',
store: {
fields: ['name', 'email'],
data: [
{ name: 'John', email: 'john@example.com' },
{ name: 'Jane', email: 'jane@example.com' }
]
},
columns: [
{ text: 'Name', dataIndex: 'name', editor: 'textfield' },
{ text: 'Email', dataIndex: 'email', editor: 'textfield' }
],
plugins: [
Ext.create('Ext.grid.plugin.CellEditing', {
clicksToEdit: 1
})
],
renderTo: Ext.getBody()
});
- CellEditing Plugin: সেলের ভিতরে ডেটা এডিট করার জন্য এটি ব্যবহার করা হয়। এটি ইনলাইন এডিটিংয়ের মতোই কাজ করে, তবে শুধুমাত্র সেল স্তরে এডিটিংয়ের সুযোগ দেয়।
clicksToEdit: একটি সেলে ক্লিক করার পর কতবার ক্লিক করলে এডিটিং শুরু হবে তা নির্ধারণ করে।
৩. Row Editing
Row Editing এ, একটি সম্পূর্ণ রো একসাথে সম্পাদনা করা হয়। এর মাধ্যমে একাধিক সেলের ডেটা সম্পাদনা করা যায়, যেখানে সেলগুলি একই রো-তে থাকে। এটি সাধারণত একটি RowEditing Plugin ব্যবহার করে সম্পাদন করা হয়, যা একযোগে সেলের পরিবর্তন পরিচালনা করতে সহায়তা করে।
Row Editing কনফিগারেশন:
উদাহরণ:
Ext.create('Ext.grid.Panel', {
title: 'Row Editing Example',
store: {
fields: ['name', 'email'],
data: [
{ name: 'John', email: 'john@example.com' },
{ name: 'Jane', email: 'jane@example.com' }
]
},
columns: [
{ text: 'Name', dataIndex: 'name', editor: 'textfield' },
{ text: 'Email', dataIndex: 'email', editor: 'textfield' }
],
plugins: [
Ext.create('Ext.grid.plugin.RowEditing', {
clicksToEdit: 2
})
],
renderTo: Ext.getBody()
});
- RowEditing Plugin: রো এডিটিং সক্ষম করতে
RowEditingপ্লাগিন ব্যবহার করা হয়। clicksToEdit: এটি নির্ধারণ করে কতবার ক্লিক করলে রো এডিটিং শুরু হবে।
Comparison: Inline Editing, Cell Editing, and Row Editing
| Feature | Inline Editing | Cell Editing | Row Editing |
|---|---|---|---|
| Editing Scope | Single cell editing | Single cell editing | Whole row editing |
| Activation | Single click on the cell | Single click on the cell | Double click on a row |
| Use Case | Quick edit for individual cell | Editing specific cells in the grid | Editing a set of cells at once |
| Plugin Used | CellEditing Plugin | CellEditing Plugin | RowEditing Plugin |
| Example | Name or Email in a cell | Edit Name or Email individually | Edit the entire row |
সারাংশ
- Inline Editing: গ্রিডের ভিতরে থাকা সেল সরাসরি সম্পাদনা করা হয়।
- Cell Editing: নির্দিষ্ট একটি সেলে ডেটা এডিট করা হয়।
- Row Editing: একটি সম্পূর্ণ রো সম্পাদনা করা হয়, যেখানে একাধিক সেল একসাথে সম্পাদিত হয়।
এই তিনটি এডিটিং পদ্ধতি ExtJS এর গ্রিড বা টেবিল কম্পোনেন্টে ইন্টারঅ্যাকটিভ ডেটা সম্পাদনা সুবিধা প্রদান করে এবং ইউজার এক্সপিরিয়েন্সে উন্নতি ঘটায়। ডেভেলপাররা তাদের প্রয়োজন অনুযায়ী এগুলির মধ্যে নির্বাচন করতে পারেন এবং বিভিন্ন প্লাগইন ব্যবহার করে ব্যবহারকারী ইন্টারফেসে ইফেক্টিভ ডেটা এডিটিং প্রদান করতে পারেন।
Read more
